<template>
	<div class="cover">
		<h1 class="title">{{title}}</h1>
		<div class="img-content">
			<div class="item" v-if="show" @click="$router.push({path:'/playlist/924680166'})">
				<p class="more animated fadeInDown">根据你的音乐口味生成每日更新</p>
				<div class="daliy">
					<h3>星期{{week}}</h3>
					<h2>{{date}}</h2>
				</div>
				<span>每日歌曲推荐</span>
			</div>
			<div @click="click? $router.push({path:'/playlist/'+item.id}) : null" v-bind:style="{width:width}" v-for="(item) in cover" :key="item.id" class="item">
				<p class="more animated fadeInDown">{{item.copywriter}}</p>
				<p class="number animated fadeIn">
					<img src="../../assets/headset.png" />
					{{parseInt(item.playCount/10000)>1?parseInt(item.playCount/10000)+'万': item.playCount }}
				</p>
				<img class="img" v-lazy="item.picUrl" />
				<p class="discipt">{{item.name}}</p>
				<em v-if="show" class="animated fadeIn"></em>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		props: {
			title: {
				type: String,
				default: "推荐歌单"
			},
			cover: {},
			show: {},
			width: {
				default: '140px'
			},
			click:{
				default:true
			}
		},
		computed: {
			week() {
				switch (new Date().getDay()) {
					case 1:
						return '一';
					case 2:
						return '二';
					case 3:
						return '三';
					case 4:
						return '四';
					case 5:
						return '五';
					case 6:
						return '六';
					case 7:
						return '天';
					default:
						return '';
				}
			},
			date() {
				return new Date().getDate()
			}
		}
	};
</script>
<style lang="less" scoped>
	.cover {
		.title {
			line-height: 40px;
			font-size: 20px;
			font-weight: 200;
			border-bottom: 1px solid #e1e1e2;
		}

		.img-content {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			display: flex;
			justify-content: space-between;

			.item {
				position: relative;
				width: 140px;
				margin-top: 10px;
				overflow: hidden;
				font-size: 11px;

				&:nth-child(5n) {
					margin-right: 0;
				}

				&:hover .more,
				&:hover em {
					display: inline-block;
				}

				&:hover .number {
					display: none;
				}

				.daliy {
					width: 100%;
					height: 140px;
					border: 1px solid rgb(225, 225, 226);
					text-align: center;
					color: rgb(102, 102, 102);

					h3 {
						height: 40px;
						line-height: 40px;
						font-size: 15px;
						font-weight: normal;
					}

					h2 {
						height: 80px;
						line-height: 80px;
						font-size: 80px;
						color: rgb(198, 47, 47);
					}
				}

				em {
					position: absolute;
					background-image: url("../../assets/play.png");
					width: 25px;
					height: 25px;
					right: 5px;
					bottom: 45px;
					background-size: cover;
					background-color: white;
					border-radius: 25px;
					opacity: 0.8;
					display: none;
				}

				.more {
					position: absolute;
					color: white;
					background-color: rgba(0, 0, 0, 0.5);
					padding: 0 5px;
					line-height: 20px;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 100%;
					left: 1px;
					top: 1px;
					font-size: 11px;
					display: none;
				}

				.number {
					position: absolute;
					height: 20px;
					width: 100%;
					text-align: right;
					color: white;
					font-size: 11px;
					padding-right: 5px;

					background: linear-gradient(to left,
						rgba(100, 100, 100, 0.9),
						rgba(255, 255, 255, 0.1));

					/* 标准的语法 */
					img {
						width: 15px;
						height: 15px;
						vertical-align: middle;
					}
				}

				.discipt {
					font-size: 12px;
					cursor: pointer;

					word-wrap: break-word;
					word-break: break-all;
				}

				.img {
					height: 140px;
					border: 1px solid #e1e1e2;
				}
			}
		}
	}
</style>
